<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 2 loading a sprite sheet</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
	</style>
	<script src="../../../bin/pixi.dev.js"></script>
</head>
<body>
	<script>
	// create an array of assets to load
	var assetsToLoader = [ "fighter.json"];

	// create a new loader
	loader = new PIXI.AssetLoader(assetsToLoader);

	// use callback
	loader.onComplete = onAssetsLoaded

	//begin load
	loader.load();

	// holder to store aliens
	var aliens = [];

	var count = 0;

	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0xFFFFFF);

	// create a renderer instance.
//	renderer = PIXI.autoDetectRenderer(800, 600);
	renderer = new PIXI.CanvasRenderer(800, 600);

	// add the renderer view element to the DOM
	document.body.appendChild(renderer.view);

	// create an empty container
	var alienContainer = new PIXI.DisplayObjectContainer();
	alienContainer.position.x = 400;
	alienContainer.position.y = 300;

	stage.addChild(alienContainer);

	function onAssetsLoaded()
	{
		// create a texture from an image path
		// add a bunch of aliens
		var frames = [];

		for (var i = 0; i < 30; i++) {
			var val = i < 10 ? "0" + i : i;
			frames.push(PIXI.Texture.fromFrame("rollSequence00" + val + ".png"));
		};

		movie = new PIXI.MovieClip(frames);

		movie.position.x = 300;
		movie.position.y = 300;

		movie.anchor.x = movie.anchor.y =  0.5;
		movie.play();
		movie.animationSpeed = 0.5;
		stage.addChild(movie);
		
		// start animating
		requestAnimFrame(animate);
	}

	function animate() {
		movie.rotation += 0.01;
	    
	    // render the stage
	    renderer.render(stage);

	    requestAnimFrame(animate);
	}
	</script>

	</body>
</html>
